<template>
  <view class="content">
    <view class="form">
      <view class="name">
        <view class="label bef">类型名称:</view>
        <input type="text" v-model="data.name" placeholder="请输入类型名称" bindinput="typename" />
      </view>
      <view class="name">
        <view class="label bef">类型权重:</view>
        <input type="number" v-model="data.sort" placeholder="请输入类型权重" bindinput="typeweight" />
      </view>
    </view>
    <view class="btn">
      <button @click="typeput" v-if="data.id">修改</button>
      <button @click="posttype" v-else>添加</button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { err, back, toast } from '@/utils/uniapi';
import { api } from '@/api/mop_api';
const data = reactive({
  sort: '',
  name: '',
  id: ''
});
onLoad((e: any) => {
  console.log(e);
  data.id = e.id;
  if (e) {
    getId(e.id);
  }
});
async function getId(id: any) {
  try {
    const res: any = await api.typeget({ id });
    if (res.respCode === 200) {
      const { name, sort } = JSON.parse(res.source);
      data.name = name;
      data.sort = sort;
    } else {
      err(res.msg);
    }
  } catch (e) {
    err(e);
  }
}
async function typeput() {
  try {
    const { id, name, sort } = data;
    const res: any = await api.typeput({ id, name, sort });
    console.log(res);
    if (res.respCode === 200) {
      toast('修改成功,即将跳转');
      back();
    } else {
      toast(res.msg);
      err(res.msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
async function posttype() {
  const { name, sort } = data;
  try {
    if (!name || !sort) {
      return toast('请将页面信息填写完整');
    }
    const { respCode, msg } = await api.newtype({ name, sort });
    if (respCode === 200) {
      toast('添加成功');
      back();
    } else {
      toast(msg);
      err(msg);
    }
  } catch (error) {
    err(error);
    throw error;
  }
}
</script>

<style scoped>
.form {
  width: 732rpx;
  margin: 20rpx auto;
  background: #fff;
  box-shadow: 0rpx 4rpx 10rpx rgba(10, 14, 20, 0.05);
  padding: 20rpx;
  box-sizing: border-box;
}
.name {
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #111827;
  line-height: 60rpx;
  margin-bottom: 20rpx;
  display: flex;
}
.label {
  margin-right: 20rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #111827;
}
input {
  width: 462rpx;
  height: 52rpx;
  opacity: 1;
  border: 2rpx solid #e5e7eb;
  padding-left: 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.pl {
  line-height: 60rpx;
}
button {
  width: 732rpx;
  height: 68rpx;
  background: #e30514;
  border-radius: 20rpx;
  padding: 0;
  line-height: 68rpx;
  font-size: 28rpx;
  font-family: Source Han Sans CN-Medium, Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}
</style>
